<template>
	<view>
		<!-- 头部 -->
		<u-sticky>
			<view class="dingbu ffffff">
				<view class="" :style="{paddingTop:menutop+'rpx'}">
					<view class="flexbetween">
						<view class="" @click="fhsy">
							<u-icon name="arrow-left" color="#000000" size="28"></u-icon>
						</view>
						<view class="" style="width: 33.33%;">
							<view class="block flexleft">
								<view :class="current1==1?'nofocustext':'focustext'" @click="selectab(1)">平台券</view>
								<view :class="current1==2?'nofocustext':'focustext'" @click="selectab(2)">商家券</view>
							</view>
						</view>
						<view class="" style="width: 33.33%;"></view>
					</view>
					<view class="margin_top1 ffffff">
						<u-tabs :list="list1" :current="current" lineColor="#F76D1A" :scrollable="false"
							@click="changetab" :activeStyle="{
							    color: '#F76D1A',
							    fontWeight: 'bold',
							    transform: 'scale(1.05)'
							}" :inactiveStyle="{
							            color: '#000000',
										fontWeight: 'bold',
							            transform: 'scale(1)'
							        }" itemStyle="height: 44px;"></u-tabs>
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 内容 -->
		<view class="mainpadding2">
			<view class="margin_top"  v-for="item in list" :key="item.shop_id">
				<view class="flexleft" v-if="current1==2"  @click="jumpdetail('/pages_shouye/mendianxq?id=',item.shop_id)">
					<image class="touxiag margin_right2" :src="item.shop_logo" mode=""></image>
					<view class="ershiba fonweight zhonghei">{{item.shop_name}}</view>
				</view>
				<view class="flexleft" v-else>
					<image class="touxiag margin_right2" :src="item.shop_logo" mode=""></image>
					<view class="ershiba fonweight zhonghei">{{item.shop_name}}</view>
				</view>
				<view class="" v-for="ite in item.couponlist" :key="ite.id">
					<view class=" block1 margin_top mainpadding radius flexbetween" v-if="ite.status==10">
						<view class="flexleft">
							<view class=" margin_right4">
								<view class="strongtext xiaocheng fonweight">￥
									<text class="sishi xiaocheng fonweight">{{ite.price}}</text>
								</view>
								<view class="xiaohui strongtext margin_top2">满{{ite.mj_price}}可用</view>
							</view>
							<view class="dqline margin_right"></view>
							<view class="">
								<view class="zhonghei sanshier fonweight">{{ite.name}}</view>
								<view class="strongtext xiaohui margin_top2">有效期至{{ite.end_time_text}}</view>
							</view>
						</view>
						<view class="wlhbtn flexcenter" v-if="current1==2" @click="jumpdetail('/pages_shouye/mendianxq?id=',item.shop_id)">立即使用</view>
						<view class="wlhbtn flexcenter" v-else @click="tzsplb">立即使用</view>
					</view>
					<view class=" block2 margin_top mainpadding radius flexbetween"  v-if="ite.status==20 || ite.status==30">
						<view class="flexleft">
							<view class=" margin_right4">
								<view class="strongtext xiaohui1 fonweight">￥
									<text class="sishi xiaohui1 fonweight">{{ite.price}}</text>
								</view>
								<view class="xiaohui1 strongtext margin_top2">满{{ite.mj_price}}可用</view>
							</view>
							<view class="dqline margin_right"></view>
							<view class="">
								<view class="xiaohui1 sanshier fonweight">{{ite.name}}</view>
								<view class="strongtext xiaohui1 margin_top2">有效期至{{ite.end_time_text}}</view>
							</view>
						</view>
						<!-- 已使用 -->
						<image class="dtuicon" src="../static/images/system/ysy.png" mode="" v-if="ite.status==20"></image>
						<!-- 已过期 -->
						<image class="dtuicon" src="../static/images/system/ygq.png" mode="" v-if="ite.status==30"></image>
					</view>
				</view>
				
			</view>
		</view>
		<view class="gudingdb mainpadding" @click="tzsplb">
			<view class="bigbtn">为你推荐商品列表</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				current1: 1,
				menutop: 0,
				current: 0,
				list1: [{
						name: '未使用',
						value: 10,
					},
					{
						name: '已使用',
						value: 20,
					},
					{
						name: '已过期',
						value: 30,
					}
				],
				tabsid: 10,
				list:[]
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
			// #endif
			this.init()
		},
		methods: {
			init() {
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/user/userCouponIndex', 'POST', {
					type: this.current1==1?0:1,
					status: this.tabsid
				}).then(res => {
					uni.hideLoading()
					this.list = res.data
				}).catch(err => {})
			},
			// 跳转商品列表
			tzsplb() {
				uni.navigateTo({
					url: '/pages_lianmengsc/shangpinlb'
				})
			},
			// 返回上一页
			fhsy() {
				uni.navigateBack(1)
			},
			changetab(e) {
				this.tabsid = e.value
				this.init()
			},
			selectab(i) {
				if (i == this.current1) {
					return false
				}
				this.current1 = i
				this.init()
			},
			jumpdetail(url, id) {
				uni.navigateTo({
					url: url + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dtuicon {
		width: 145.55rpx;
		height: 145.55rpx;
	}

	.xiaohui1 {
		color: #CDCDCD;
	}

	.touxiag {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
	}

	.wlhbtn {
		width: 132rpx;
		height: 49rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		border: 1rpx solid #FF8505;
	}

	.ylhbtn {
		width: 132rpx;
		height: 49rpx;
		background: rgba(156, 156, 156, 0.1);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #9C9C9C;
		border: 1rpx solid #9C9C9C;
	}

	.dqline {
		width: 1rpx;
		height: 52rpx;
		background-color: #999999;
	}

	.block1 {
		background: #FBF6F1;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.block2 {
		background: #f2f2f2;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.focustext {
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
		width: 177rpx;
		height: 67rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nofocustext {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 177rpx;
		height: 67rpx;
		background: #FF7510;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.block {
		background: #fff;
		width: 355rpx;
		height: 67rpx;
		border: 2rpx solid #FF9341;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
	}

	.dingbu {
		padding: 0 30rpx 30rpx;
		background-size: 100% 100%;
		width: 100%;
		box-sizing: border-box;
	}
</style>